<template>
  <div class="music-item"  @click="setIsPlay(item.data.songmid,item.data.albumid,item.data.songname,index)">
    <div class="song-info">
      <div class="song">{{item.data.songname}}</div>
      <div class="singer">{{item.data.singer[0].name}}</div>
    </div>
    <div class="contrl-icon" :class="item.data.songmid==playSongId?'play':'pause'"></div>
  </div>
</template>
<script>
// import Base64 from 'js-base64'
export default {
  props: ['item', 'index', 'playSongId'],
  data () {
    return {
    }
  },
  mounted: function () {
  },
  methods: {
    setIsPlay: function (songId, albumId, songName, index) { // songId:音乐id albumId:图片id songName:歌曲名称
      this.$emit('playMusic', {songId: songId, albumId: albumId, songName: songName, index: index})
      let that = this
      console.log(that)
      this.$axios.get('/lyric').then(function (data) {
        let lyric = JSON.parse(data.data.split('(')[1].split(')')[0]).lyric
        that.MusicJsonCallback_lrc(lyric)
      })
    },
    MusicJsonCallback_lrc: function (data) {
      /* console.log(Base64.Base64.decode(data)) */
    }
  }
}
</script>
<style scoped>
.music-item{width: 90%;margin: auto;padding: 0 2%;height: 45px;border-bottom: 1px #ededed solid;display: flex;justify-content: space-between;align-items: center}
.song-info{display: flex;height: 100%;flex-direction: column;justify-content: center}
.song{font-size: 14px;color: #000000;margin-bottom: 3px}
.singer{font-size: 12px;color: #464646}
.contrl-icon{width: 25px;height: 25px;background-repeat:no-repeat;background-size: 100%}
.pause{background-image: url("./../assets/play_icon.png");}
.play{background-image: url("./../assets/pause_icon.png");}
div{}
</style>
